<h:panelGroup layout="block"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:a4j="https://ajax4jsf.dev.java.net/ajax"
  xmlns:c="http://java.sun.com/jstl/core"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:nxr="http://nuxeo.org/nxweb/resources"
  styleClass="hostInfos">

  <h:outputScript src="/scripts/json2html.js" target="#{pageJsTarget}" />
  <h:outputScript src="/scripts/jquery.json2html.js" target="#{pageJsTarget}" />
  <h:outputScript src="/scripts/displayESJSON.js" target="#{pageJsTarget}" />

   <c:choose>
    <c:when test="#{esAdmin.isIndexingInProgress()}">
      <div class="processMessage completeWarning">Indexing in progress</div>
    </c:when>
    <c:otherwise>
      <div class="processMessage completeInfo">No indexing in progress</div>
    </c:otherwise>
  </c:choose>

  <h3>Indexing state</h3>
  <div class="detail">An indexing command is an Elasticsearch operation that can insert, update or delete one or many Nuxeo documents.
  Commands are processed by a pool of indexing worker.</div>
  <pre class="bubbleBox">
Indexing worker running: <h:outputText value="#{esAdmin.runningWorkerCount}"/>
Indexing worker pending: <h:outputText value="#{esAdmin.pendingWorkerCount}"/>
Number of command processed since Nuxeo instance startup: <h:outputText value="#{esAdmin.totalCommandProcessed}"/>
  </pre>

  <h4>Indexing rates</h4>
  <div class="detail">Exponentially-weighted moving average rate of indexing last 1, 5 and 15 minutes in docs/s (similar to Unix load).</div>
  <pre class="bubbleBox">
    <h:outputText
      value="#{esAdmin.indexingRates}"/>
  </pre>

  <h4>Bulk indexing rates</h4>
  <div class="detail">Exponentially-weighted moving average rate of bulk indexing last 1, 5 and 15 minutes in bulk commands/s. A bulk command
  contains a list of documents to index, the default size used when re-indexing is 50 documents per bulk command.</div>
  <pre class="bubbleBox">
    <h:outputText
      value="#{esAdmin.bulkIndexingRates}"/>
  </pre>

  <h3>Elasticsearch documents</h3>
  <div class="detail">Number of documents in all the Elasticsearch index associated with repositories.</div>
  <pre class="bubbleBox">
    <h:outputText value="#{esAdmin.numberOfDocuments}"/>
  </pre>

  <h3> Elasticsearch Health</h3>
  <pre class="bubbleBox">
    <h:outputText value="#{esAdmin.nodesHealth}"/>
  </pre>

  <c:choose>
    <c:when test="#{esAdmin.displayClusterInfo()}">
      <h3> Elasticsearch Stats </h3>

      <div>
        <a id="ESStatsOpen" href="#" class="button tinyButton">Expand all</a>
        <a id="ESStatsClose" href="#" class="button tinyButton" style="display:none">Unexpand all</a>
      </div>

      <div id="ESStats"></div>

      <h3> Elasticsearch Cluster Config</h3>

      <div>
        <a id="ESConfigOpen" href="#" class="button tinyButton">Expand all</a>
        <a id="ESConfigClose" href="#" class="button tinyButton" style="display:none">Unexpand all</a>
      </div>

      <div id="ESConfig"></div>

<h:outputScript target="#{pageJsTarget}">
function initExpandAll(divId) {
  jQuery('#' + divId + 'Open').click(function() {
    jQuery(this).css('display', 'none');
    jQuery('#' + divId + ' div.closed > div.esheader > div.arrow').click();
    jQuery('#' + divId + 'Close').css('display', '');
    return false;
  });
  jQuery('#' + divId + 'Close').click(function() {
    jQuery(this).css('display', 'none');
    jQuery('#' + divId + ' div.open > div.esheader > div.arrow').click();
    jQuery('#' + divId + 'Open').css('display', '');
    return false;
  });
}

function initESInfo() {
  // I know this is bad
  jQuery('head').append('<link rel="stylesheet" type="text/css" href="#{baseURL}css/displayESJSON.css"/>');

  displayESJSON('config', <h:outputText value="#{esAdmin.nodesInfo}" escape="false" />, jQuery('#ESConfig'));
  displayESJSON('stats', <h:outputText value="#{esAdmin.nodesStats}" escape="false" />, jQuery('#ESStats'));
}

jQuery(document).ready(function(){
  initESInfo();
  initExpandAll('ESStats');
  initExpandAll('ESConfig');
})
</h:outputScript>

    </c:when>
  </c:choose>

</h:panelGroup>